<template>
  <el-dialog
    v-model="centerDialogVisible"
    :title="SchedulingInfo.id ? '修改排班' : '添加排班'"
    width="600"
    center
    @close="closeDialog"
  >
    <el-form
      :model="SchedulingInfo"
      label-width="120px"
      ref="form"
      :rules="rules"
    >
      <el-form-item label="排班日期:" prop="date">
        <el-date-picker
          v-model="SchedulingInfo.date"
          type="date"
          placeholder="请选择排班日期"
          :disabled-date="disabledDate"
          value-format="YYYY/MM/DD"
        />
      </el-form-item>
      <el-form-item label="开始时间:" prop="startTime">
        <el-time-select
          v-model="SchedulingInfo.startTime"
          style="width: 240px"
          :max-time="SchedulingInfo.endTime"
          class="mr-4"
          placeholder="Start time"
          start="08:30"
          step="00:15"
          end="18:30"
        />
      </el-form-item>
      <el-form-item label="结束时间:" prop="endTime">
        <el-time-select
          v-model="SchedulingInfo.endTime"
          style="width: 240px"
          :min-time="SchedulingInfo.startTime"
          class="mr-4"
          placeholder="End time"
          start="08:30"
          step="00:15"
          end="18:30"
        />
      </el-form-item>
      <el-form-item label="状态:" prop="status">
        <el-radio-group v-model="SchedulingInfo.status" size="small">
          <el-radio-button label="预约挂号中" :value="0" />
          <el-radio-button label="已停诊" :value="1" />
          <el-radio-button label="已满员" :value="2" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="最大预约人数:" prop="maxNumber">
        <el-input-number
          v-model="SchedulingInfo.maxNumber"
          :min="10"
          :max="50"
        />
      </el-form-item>
      <el-form-item label="价格:" prop="price">
        <el-select
          v-model="SchedulingInfo.price"
          placeholder="请选择挂号费用"
          style="width: 30%"
        >
          <el-option label="10元" :value="10"></el-option>
          <el-option label="15元" :value="15"></el-option>
          <el-option label="20元" :value="20"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="AddOrUPdateScheduling"  >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch, reactive } from "vue";
import { AddOrUpdateDoctorSchAPI , getDoctorSchDetailAPI  } from "@/api/doctorSching";
import { ElMessage } from "element-plus";
defineOptions({
  name: "AddScheduling",
});
const props = defineProps(["modelValue", "id", "doctorId", "ShowScheduling" ]);
const emits = defineEmits(["update:modelValue"]);
//控制对话框的显示与隐藏
const centerDialogVisible = ref(props.modelValue);
//表单实例对象
let form = ref(null);
//排班信息
let SchedulingInfo =props.info ? props.info : reactive({
  doctorId: props.doctorId,
  date: "", //排班日期
  startTime: "", //开始时间
  endTime: "", //结束时间
  status: 0, //状态
  maxNumber: 0, //最大预约数
  price: 10, //价格
});
//表单校验的规则
const rules = {
  date: { required: true, message: "请选择排班日期", trigger: "blur" },
  startTime: { required: true, message: "请选择开始时间", trigger: "blur" },
  endTime: { required: true, message: "请选择结束时间", trigger: "blur" },
  maxNumber: { required: true, message: "请输入最大预约数", trigger: "blur" },
  price: { required: true, message: "请选择挂号费用", trigger: "blur" },
};

watch(
  () => props.modelValue,
  (newValue) => {
    centerDialogVisible.value = newValue;
  }
);
watch(
  () => props.doctorId,
  (newValue) => {
    SchedulingInfo.doctorId = newValue;
  }
);
watch(
  () => props.id,
  (newValue) => {
    SchedulingInfo.id = newValue;
   
  }
);
const closeDialog = () => {
  emits("update:modelValue", false);
  //复原表单
  Object.assign(SchedulingInfo, {
    doctorId: props.doctorId,
    date: "", //排班日期
    startTime: "", //开始时间
    endTime: "", //结束时间
    status: 0, //状态
    maxNumber: 0, //最大预约数
    price: 10, //价格
    id: "",
  });
  //重置表单
  form.value.resetFields();
};
const disabledDate = (time) => {
  //过去的日期不能再选择,而且只能选择7天以内的
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  const sevenDays = 1000 * 60 * 60 * 24 * 7;
  const sevenDaysAfter = today.getTime() + sevenDays;
  return (
    time.getTime() <= today.getTime() - 8.64e7 ||
    time.getTime() > sevenDaysAfter
  );
};
const makeRange = (start, end) => {
  const result = [];
  for (let i = start; i <= end; i++) {
    result.push(i);
  }
  return result;
};

const disabledHours = () => {
  return makeRange(0, 16).concat(makeRange(19, 23));
};
const disabledMinutes = (hour) => {
  if (hour === 18) {
    return makeRange(31, 59);
  }
};
const disabledSeconds = (hour, minute) => {
  if (hour === 18 && minute === 30) {
    return makeRange(1, 59);
  }
};
//添加或者修改排班
const AddOrUPdateScheduling = async () => {
  // 表单校验
  await form.value.validate();
  // 发送请求
  let result = await AddOrUpdateDoctorSchAPI(SchedulingInfo);
  ElMessage({
    type: "success",
    message: SchedulingInfo.id ? "修改排班成功" : "添加排班成功",
  });
  // 关闭对话框
  closeDialog();
  // 刷新页面
  props.ShowScheduling(SchedulingInfo.doctorId);
};
const getDoctorSching = async (id)=>{
    let result = await getDoctorSchDetailAPI(id);
   SchedulingInfo.id = result.data._id;
   SchedulingInfo.doctorId = result.data.doctorId;
   SchedulingInfo.date = result.data.date;
   SchedulingInfo.startTime = result.data.startTime;
   SchedulingInfo.endTime = result.data.endTime;
   SchedulingInfo.status = result.data.status;
   SchedulingInfo.maxNumber = result.data.maxNumber;
   SchedulingInfo.price = result.data.price;
   
   
}
defineExpose({
    getDoctorSching
})
</script>

<style lang="scss" scoped></style>
